<template>
    <div class="bg-[#F5F7FA] font-inter text-dark">
        <div class="container mx-auto px-4 py-8 max-w-6xl">
            <!-- 页面标题 -->
            <div class="mb-8 text-center">
                <h1
                    class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-2"
                >
                    文档解析
                </h1>
                <p class="text-gray-500">上传您的结算资料</p>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <!-- 系统提示区域 -->
                <div
                    class="lg:col-span-1 bg-[#FFFFFF] rounded-xl shadow-card transition-custom hover:shadow-hover"
                >
                    <div class="p-6 h-full">
                        <div class="flex items-center mb-4">
                            <div
                                class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3"
                            >
                                <el-icon
                                    class="text-primary text-xl"
                                    style="color: #7b61ff"
                                >
                                    <InfoFilled />
                                </el-icon>
                            </div>
                            <h2 class="text-xl font-semibold">系统提示</h2>
                        </div>

                        <ul class="space-y-4 text-gray-600">
                            <li class="flex">
                                <span
                                    class="inline-block w-6 h-6 rounded-full bg-primary/10 text-primary text-sm font-medium flex items-center justify-center mr-3 mt-0.5 flex-shrink-0"
                                    style="color: #7b61ff"
                                    >1</span
                                >
                                <p>
                                    只针对四类项目和维修的工程项目进行报价文件解析。
                                </p>
                            </li>
                            <li class="flex">
                                <span
                                    class="inline-block w-6 h-6 rounded-full bg-primary/10 text-primary text-sm font-medium flex items-center justify-center mr-3 mt-0.5 flex-shrink-0"
                                    style="color: #7b61ff"
                                    >2</span
                                >
                                <p>仅支持.docx或pdf格式报价文件。</p>
                            </li>
                        </ul>

                        <div
                            style="color: #7b61ff"
                            class="mt-6 p-4 bg-secondary rounded-lg flex items-start"
                        >
                            <el-icon class="text-primary mt-0.5 mr-3"
                                ><CircleCheckFilled
                            /></el-icon>
                            <p class="text-sm text-gray-700">
                                上传前请确认文档格式正确
                            </p>
                        </div>
                    </div>
                </div>

                <!-- 上传文档区域 -->
                <div
                    class="lg:col-span-2 bg-[#FFFFFF] rounded-xl shadow-card transition-custom hover:shadow-hover"
                >
                    <div class="p-6">
                        <div class="flex justify-between items-center mb-6">
                            <h2 class="text-xl font-semibold">上传文档</h2>
                            <el-button
                                icon="Close"
                                circle
                                size="small"
                                class="text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-custom"
                                @click="handleClose"
                            />
                        </div>

                        <!-- 拖放区域 -->
                        <div
                            ref="dropArea"
                            class="border-2 border-dashed border-gray-300 rounded-lg p-10 text-center mb-6 transition-custom hover:border-primary/50 hover:bg-primary/5"
                            @dragenter.prevent="handleDragEnter"
                            @dragover.prevent="handleDragOver"
                            @dragleave.prevent="handleDragLeave"
                            @drop.prevent="handleDrop"
                            :class="{
                                'border-primary bg-primary/10': isDragging,
                            }"
                        >
                            <div class="max-w-xs mx-auto">
                                <div
                                    class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4"
                                >
                                    <el-icon class="text-primary text-2xl">
                                        <UploadFilled />
                                    </el-icon>
                                </div>
                                <p class="text-gray-500 mb-2">
                                    拖放文件至此处或点击上传
                                </p>
                                <p class="text-sm text-gray-400">
                                    支持 .docx、.pdf 格式
                                </p>

                                <input
                                    type="file"
                                    ref="fileInput"
                                    class="hidden"
                                    accept=".docx,.pdf"
                                    @change="handleFileSelect"
                                />
                                <el-button
                                    type="text"
                                    class="mt-4 text-primary hover:text-primary/80 text-sm font-medium transition-custom"
                                    @click="triggerFileSelect"
                                >
                                    选择文件
                                    <el-icon class="ml-1">
                                        <ArrowRight />
                                    </el-icon>
                                </el-button>
                            </div>
                        </div>

                        <!-- 文件信息显示区域 -->
                        <div
                            v-if="selectedFile"
                            class="mb-6 p-4 bg-neutral rounded-lg animate-fadeIn"
                        >
                            <div class="flex items-center">
                                <div
                                    class="w-10 h-10 rounded bg-primary/10 flex items-center justify-center mr-3"
                                >
                                    <el-icon class="text-primary">
                                        <Document />
                                    </el-icon>
                                </div>
                                <div class="flex-grow">
                                    <p
                                        id="fileName"
                                        class="font-medium truncate"
                                    >
                                        {{ selectedFile.name }}
                                    </p>
                                    <p
                                        id="fileSize"
                                        class="text-sm text-gray-500"
                                    >
                                        {{ formatFileSize(selectedFile.size) }}
                                    </p>
                                </div>
                                <el-button
                                    icon="Delete"
                                    circle
                                    size="small"
                                    class="text-gray-400 hover:text-danger transition-custom hover:bg-danger/10"
                                    @click="removeFile"
                                />
                            </div>
                        </div>

                        <!-- 上传进度条 (仅在上传中显示) -->
                        <el-progress
                            v-if="uploadProgress > 0 && uploadProgress < 100"
                            :percentage="uploadProgress"
                            class="mb-6"
                            stroke-width="3"
                        />

                        <!-- 操作按钮 -->
                        <div class="flex justify-end gap-3">
                            <el-button
                                type="primary"
                                class="px-8 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-custom flex items-center shadow-lg shadow-primary/20"
                                :disabled="!selectedFile || uploadProgress > 0"
                                @click="handleSubmit"
                            >
                                确定
                                <el-icon class="ml-2">
                                    <ArrowRight />
                                </el-icon>
                            </el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import {
    InfoFilled,
    CircleCheckFilled,
    UploadFilled,
    Close,
    ArrowRight,
    Document,
    Delete,
} from "@element-plus/icons-vue";
import { ElMessage, ElProgress } from "element-plus";

// 文件状态管理
const selectedFile = ref(null);
const isDragging = ref(false);
const uploadProgress = ref(0);
const dropArea = ref(null);
const fileInput = ref(null);

// 组件挂载时初始化
onMounted(() => {
    // 确保DOM元素已正确加载
    if (!dropArea.value) {
        console.warn("拖放区域元素未找到");
    }
});

// 触发文件选择对话框
const triggerFileSelect = () => {
    if (fileInput.value) {
        fileInput.value.click();
    } else {
        console.warn("文件输入元素未找到");
    }
};

// 处理文件选择
const handleFileSelect = (e) => {
    const file = e.target.files[0];
    if (file) {
        handleFile(file);
    }
};

// 拖放事件处理
const handleDragEnter = () => {
    isDragging.value = true;
};

const handleDragOver = () => {
    isDragging.value = true;
};

const handleDragLeave = (e) => {
    // 检查鼠标是否真的离开拖放区域
    const rect = dropArea.value.getBoundingClientRect();
    if (
        e.clientX < rect.left ||
        e.clientX > rect.right ||
        e.clientY < rect.top ||
        e.clientY > rect.bottom
    ) {
        isDragging.value = false;
    }
};

const handleDrop = (e) => {
    isDragging.value = false;
    const file = e.dataTransfer.files[0];
    if (file) {
        handleFile(file);
    }
};

// 处理文件验证和显示
const handleFile = (file) => {
    // 重置上传进度
    uploadProgress.value = 0;

    // 检查文件类型
    const validTypes = [
        "application/pdf",
        "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
    ];

    if (!validTypes.includes(file.type)) {
        ElMessage.error("请上传docx或pdf格式的文件");
        return;
    }

    // 检查文件大小 (限制10MB)
    if (file.size > 10 * 1024 * 1024) {
        ElMessage.error("文件大小不能超过10MB");
        return;
    }

    // 显示文件信息
    selectedFile.value = file;
    ElMessage.success(`已选择文件: ${file.name}`);
};

// 移除已选文件
const removeFile = () => {
    if (selectedFile.value) {
        const fileName = selectedFile.value.name;
        selectedFile.value = null;
        uploadProgress.value = 0;
        if (fileInput.value) {
            fileInput.value.value = "";
        }
        ElMessage.info(`已移除文件: ${fileName}`);
    }
};

// 格式化文件大小
const formatFileSize = (bytes) => {
    if (!bytes) return "";
    if (bytes === 0) return "0 Bytes";
    const k = 1024;
    const sizes = ["Bytes", "KB", "MB", "GB"];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
};

// 提交处理
const handleSubmit = () => {
    if (!selectedFile.value) return;

    // 模拟文件上传进度
    uploadProgress.value = 0;
    const interval = setInterval(() => {
        uploadProgress.value += 5;

        // 模拟上传完成
        if (uploadProgress.value >= 100) {
            clearInterval(interval);
            uploadProgress.value = 100;

            ElMessage.success(`文件 "${selectedFile.value.name}" 上传成功`);

            // 上传完成后清除选择
            setTimeout(() => {
                removeFile();
            }, 1000);
        }
    }, 200);
};

// 关闭按钮处理
const handleClose = () => {
    // 这里可以添加关闭当前页面或组件的逻辑
    ElMessage.info("关闭上传窗口");
};
</script>

<style scoped>
/* 自定义动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeIn {
    animation: fadeIn 0.3s ease-out forwards;
}

/* 解决Element Plus按钮样式冲突 */
:deep(.el-button) {
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
}

:deep(.el-button--text) {
    padding: 0.5rem;
}

:deep(.el-icon) {
    vertical-align: middle;
}

/* 进度条样式优化 */
:deep(.el-progress) {
    width: 100%;
}
</style>
